<template>
  <div>
    <el-col :span="4">
      1、命名空间
    </el-col>

    <el-col :span="8">
      <el-button @click="showCreateNamespaceDialog()" style="width: 200px;" size="large" type="primary" plain>
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
          <path fill="currentColor"
            d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z">
          </path>
        </svg>
        <span class="button-text">创建命名空间</span>
      </el-button>

      <el-dialog v-model="createNamespaceDialogVisible" title="填写命名空间名称" width="30%">
        <el-form label-width="120px">
          <el-input size="large" v-model="namespaceForm.namespaceName" :placeholder="namespace" type="text">
            <template #prepend>
            </template></el-input>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="createNamespaceDialogVisible = false">取消</el-button>
          <el-button type="primary"
            @click="createNamespaceDialogVisible = false; handleCreateNamespace()">确定</el-button>
        </div>
      </el-dialog>
    </el-col>

    <el-col :span="8">
      <el-button @click="showDeleteNamespaceDialog()" style="width: 200px;" size="large" type="primary" plain>
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
          <path fill="currentColor"
            d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z">
          </path>
        </svg>
        <span class="button-text">删除命名空间</span>
      </el-button>

      <el-dialog v-model="deleteNamespaceDialogVisible" title="选择要删除的命名空间" width="30%">
        <el-form label-width="120px">
          <el-form-item label="命名空间">
            <!-- <el-select v-model="selectedNamespace" placeholder="请选择命名空间">
              <el-option v-for="ns in namespaces" :key="ns.id" :label="ns.name" :value="ns.id"></el-option>
            </el-select> -->

            <el-select v-model="selectedNamespace">
              <el-option v-for="ns in namespaces" :value="ns" :key="ns">{{ ns }}</el-option>
            </el-select>

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="deleteNamespaceDialogVisible = false">取消</el-button>
          <el-button type="primary"
            @click="deleteNamespaceDialogVisible = false; handleDeleteNamespace()">确定</el-button>
        </div>
      </el-dialog>
    </el-col>


    <el-col :span="4">
      2、镜像管理
    </el-col>

      <!-- <div> -->
        <!-- <el-button type="primary" @click="handleImageButtonClick">跳转到指定链接</el-button> -->
      <!-- </div> -->

    <el-col :span="8">
      <el-button style="width: 200px;" size="large" type="primary" plain @click="handleImageButtonClick">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
          <path fill="currentColor"
            d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z">
          </path>
        </svg>
        <span class="button-text">镜像管理</span>
      </el-button>
    </el-col>
  </div>
</template>

<script>
import { ref } from 'vue';
import { createNamespaceApi, getAllNamespaceApi } from '@/api/clusterManagement'; // 导入后端接口方法

export default {
  setup() {
    // 命名空间
    const createNamespaceDialogVisible = ref(false);
    const deleteNamespaceDialogVisible = ref(false);
    const namespaces = ref(null); // 存储命名空间列表
    const selectedNamespace = ref('');  // 存储用户选择的命名空间
    let namespaceForm = ref({
      namespaceName: ''
    });
    const showCreateNamespaceDialog = () => {
      createNamespaceDialogVisible.value = true;
    };

    const handleCreateNamespace = () => {
      createNamespaceApi({ namespace: namespaceName.value })
        .then(response => {
          console.log('命名空间创建成功:', response);
          alert('命名空间创建成功！');
          createNamespaceDialogVisible.value = false; // 关闭对话框
        })
        .catch(error => {
          console.error('创建命名空间时出现错误:', error);
          alert('创建命名空间时出现错误，请查看控制台输出。');
        });
    };
    const showDeleteNamespaceDialog = () => {
      deleteNamespaceDialogVisible.value = true;
      getAllNamespaceApi()
        .then(response => {
          namespaces.value = response.data;
        })
        .catch(error => {
          console.error('Error fetching namespaces:', error);
        });
    };
    const handleDeleteNamespace = () => {
      // 发送删除命名空间的请求到后端，你需要根据自己的后端接口进行相应的实现
      console.log('Deleting namespace with ID:', selectedNamespace.value);
      // deleteNamespace({ namespace: namespaceName.value })
      //   .then(response => {
      //     console.log('命名空间创建成功:', response);
      //     alert('命名空间创建成功！');
      //     deleteNamespaceDialogVisible.value = false; // 关闭对话框
      //   })
      //   .catch(error => {
      //     console.error('创建命名空间时出现错误:', error);
      //     alert('创建命名空间时出现错误，请查看控制台输出。');
      //   });
    };
    // 镜像
   const  handleImageButtonClick=()=>{
    window.location.href = 'http://172.20.216.103:8998'; // 将链接替换为你想要跳转的目标链接

   }
    return {
      // 创建命名空间
      createNamespaceDialogVisible,
      namespaceForm,
      handleCreateNamespace,
      showCreateNamespaceDialog,
      // 删除命名空间
      deleteNamespaceDialogVisible,
      handleDeleteNamespace,
      showDeleteNamespaceDialog,
      namespaces,
      selectedNamespace,
      // 镜像管理
      handleImageButtonClick,
    };
  }
}
</script>

<style scoped>
.add-button {
  size: large;
  height: 100px;
}

.add-button:hover {
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
}

.button-text {
  display: inline-block;
  vertical-align: auto;
}

.icon {
  /* margin-top: 10px; */
  width: 20px;
  height: 20px;
}

.el-row {
  margin-top: 20px;
  margin-bottom: 20px;
  margin: 20px;
}

.el-col {
  margin-top: 20px;
  margin-bottom: 20px;
  margin: 20px;
}
</style>
